<template>
    <div class="footer">
        <div @click="tabsClick('home')" class="isActive" ref="home"><i class="el-icon-house"></i>首页</div>
        <div @click="tabsClick('my')" ref="my"><i class="el-icon-user"></i>我的</div>
    </div>
</template>

<script type="text/javascript">
/**
 * @Author dingxing [2022-11-24 14:35:20]
 * @Description 
 */
export default {
    name: 'footer-vue',
    components: {
    },

    props: {},

    data() {
        return {
            name: "我的"
        }
    },

    watch: {},

    mounted() {
        let name = localStorage.getItem('tabTagName') || 'home';
        console.log(name)
        this.setItem(name)
    },


    methods: {
        
        tabsClick(type) {
            localStorage.setItem('tabTagName', type);
            this.setItem(type);
        },

        // 设置颜色
        setItem(type) {
            if (type == 'home') {
                this.$refs[type].classList.add('isActive');
                this.$refs['my'].classList.remove('isActive');
                this.$router.push({
                    path: '/home',
                    query: {
                        name: "首页"
                    }
                });
            } else {
                this.$refs[type].classList.add('isActive');
                this.$refs['home'].classList.remove('isActive');
                this.$router.push({
                    path: '/my',
                    query: {
                        name: "我的"
                    }
                });
            }
        }
    }
}
</script>

<style lang="less" scoped>
.footer {
    height: 50px;
    display: flex;
    justify-content: space-around;
    background: rgb(247, 245, 245);
    div {
        height: 100%;
        display: flex;
        align-items: center;
        &.isActive {
            color: red;
        }
        i {
            font-size: 25px;
        }
    }
}
</style>